<template>
  <el-select-v2
    v-model="checkedItems"
    :options="options"
    multiple
    collapse-tags
    collapse-tags-tooltip
    filterable
    :max-collapse-tags="3"
    :props="{ label: 'title', value: 'id' }"
    @change="handleChange"
  />
</template>
<script setup lang="ts">
import { useTableDialogStore } from '@/store/modules/tableDialog'

const tableDialogStore = useTableDialogStore('attachmentWrite')
const checkedItems = ref<Array<number>>([])
const options = computed(() => tableDialogStore.selectedItems)

watch(
  () => tableDialogStore.selectedItems,
  () => {
    nextTick(() => {
      checkedItems.value = tableDialogStore.selectedItems.flatMap((item) => [item.id])
    })
  },
  { immediate: true, deep: true }
)

const handleChange = (val: Array<number>) => {
  tableDialogStore.setCheckedItems(
    tableDialogStore.selectedItems.filter((item) => val.includes(item.id))
  )
}
</script>
<style lang="less" scoped></style>
